// const {
//   sources
// } = require('webpack');

// class PxToRemPlugin {
//   constructor(options) {
//     this.options = options;
//   }
//   apply(compiler) {
//     compiler.hooks.compilation.tap('PxToRemPlugin', (compilation) => {
//       compilation.hooks.processAssets.tapAsync({
//           name: 'PxToRemPlugin',
//           stage: compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
//         },
//         (assets, callback) => {
//           const {
//             whiteList,
//             ignore,
//             base
//           } = this.options;

//           for (const filename in assets) {
//             if (filename.endsWith('.css')) {
//               let css = assets[filename].source().toString();

//               if (ignore && ignore.test(filename)) {
//                 continue;
//               }

//               css = css.replace(/(\d+)px/g, (match, p1) => {
//                 const pxValue = parseInt(p1, 10);
//                 const remValue = pxValue / base;

//                 if (whiteList && whiteList.includes(match)) {
//                   return match;
//                 }

//                 return `${remValue}rem`;
//               });

//               assets[filename] = new sources.RawSource(css);
//             }
//           }

//           callback();
//         }
//       );
//     });
//   }
// }

// module.exports = PxToRemPlugin;
/**********************************************************************************************************/

// const {
//   sources
// } = require('webpack');
// const {
//   RawSource
// } = sources

// class PxToRemPlugin {
//   constructor(options) {
//     this.options = options;
//   }
//   apply(compiler) {
//     // 在compiler的emit阶段添加一个异步插件
//     compiler.hooks.emit.tapAsync('PxToRemPlugin', (compilation, callback) => {
//       // 获取所有的chunk资源
//       const assets = compilation.getAssets();
//       const {
//         whiteList,
//         ignore,
//         base
//       } = this.options;
//       // 遍历所有的chunk资源
//       for (const asset of assets) {
//         // 如果资源为css文件
//         if (asset.name.endsWith('.css')) {
//           // 取得原始的css代码
//           let source = asset.source.source();

//           // 将px替换为rem（省略具体实现）
//           const css = source.replace(/(\d+)px/g, (match, p1) => {
//             const pxValue = parseInt(p1, 10);
//             const remValue = pxValue / base;

//             if (whiteList && whiteList.includes(match)) {
//               return match;
//             }

//             return `${remValue}rem`;
//           });
//           console.log(css)
//           // 使用修改后的代码替换原始代码
//           compilation.updateAsset(asset.name, new RawSource(css));
//         }
//       }

//       // 完成插件执行
//       callback();
//     });

//     // 在compiler的watchRun阶段添加一个同步插件
//     compiler.hooks.watchRun.tap('PxToRemPlugin', (compiler) => {
//       // 清除缓存等操作（可根据具体需求进行扩展）
//       compiler.hooks.emit.tapAsync('PxToRemPlugin', (compilation, callback) => {
//         // 获取所有的chunk资源
//         const assets = compilation.getAssets();
//         const {
//           whiteList,
//           ignore,
//           base
//         } = this.options;
//         // 遍历所有的chunk资源
//         for (const asset of assets) {
//           // 如果资源为css文件
//           if (asset.name.endsWith('.css')) {
//             // 取得原始的css代码
//             let source = asset.source.source();

//             // 将px替换为rem（省略具体实现）
//             const css = source.replace(/(\d+)px/g, (match, p1) => {
//               const pxValue = parseInt(p1, 10);
//               const remValue = pxValue / base;

//               if (whiteList && whiteList.includes(match)) {
//                 return match;
//               }

//               return `${remValue}rem`;
//             });
//             console.log(css)
//             // 使用修改后的代码替换原始代码
//             compilation.updateAsset(asset.name, new RawSource(css));
//           }
//         }

//         // 完成插件执行
//         callback();
//       });
//     });
//   }
// }

// module.exports = PxToRemPlugin  
/********************************************************************************************/
const {
  sources
} = require('webpack');

class PxToRemPlugin {
  constructor(options) {
    this.options = options;
  }
  apply(compiler) {
    compiler.hooks.compilation.tap('PxToRemPlugin', (compilation) => {
      compilation.hooks.processAssets.tapAsync({
          name: 'PxToRemPlugin',
          stage: compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
        },
        (assets, callback) => {
          console.log('-----------------------------------------------------------------------------')
          const {
            whiteList,
            ignore,
            base
          } = this.options;

          for (const filename in assets) {
            if (filename.endsWith('.css')) {
              let css = assets[filename].source().toString();

              if (ignore && ignore.test(filename)) {
                continue;
              }

              css = css.replace(/(\d+)px/g, (match, p1) => {
                const pxValue = parseInt(p1, 10);
                const remValue = pxValue / base;

                if (whiteList && whiteList.includes(match)) {
                  return match;
                }

                return `${remValue}rem`;
              });

              assets[filename] = new sources.RawSource(css);
            }
          }

          callback();
        }
      );
    });

    compiler.hooks.emit.tap('PxToRemPlugin', (compilation) => {
      console.log('.....................................................');
      const assets = compilation.assets
      const {
        whiteList,
        ignore,
        base
      } = this.options;

      for (const filename in assets) {
        if (filename.endsWith('.css') || filename.endsWith('.html')) {
          let css = assets[filename].source().toString();

          if (ignore && ignore.test(filename)) {
            continue;
          }

          css = css.replace(/(\d+)px/g, (match, p1) => {
            const pxValue = parseInt(p1, 10);
            const remValue = pxValue / base;

            if (whiteList && whiteList.includes(match)) {
              return match;
            }

            return `${remValue}rem`;
          });

          assets[filename] = new sources.RawSource(css);
        }
      }
    })
  }
}

module.exports = PxToRemPlugin